<template>
	<view class="wrap">
		<view class="pay-mode">
			<view class="mode-item flexWrap" v-for="(item,index) in modeList" :key='index' @tap='changeMode(index)'>
				<view class="item-left">
					{{item.name}}
				</view>
				<view class="item-center">
					日均{{item.dayPrice}}元
				</view>
				<view class="item-right u-flex"  :class="{active:currmentIndex==index}">
					<text>￥{{item.price}}</text>
					<view class="check-box"></view>
				</view>
			</view>
		</view>
		<view class="button">
			<u-button size="nomal" color="#e16b8c" text="确认购买"></u-button>
		</view>
		<view class="explain-box">
			<view class="explain-title u-flex">
				<view class="line"></view>
				<text>特权说明</text>
			</view>
			<view class="explain-cont">
				<view class="explain-text">
					1、可在档案中留下联系方式，让更多人直接联系你，有助于提高成功率
				</view>
				<view class="explain-text">
					2、被搜索时排名靠前
				</view>
				<view class="explain-text">
					3、解锁“我的-收藏-收藏我的”功能
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currmentIndex:0,
				modeList:[
					{
						name:"24个月",
						price:'398',
						dayPrice:'0.5'
					},
					{
						name:"3个月",
						price:'398',
						dayPrice:'0.5'
					},
					{
						name:"1个月",
						price:'398',
						dayPrice:'0.5'
					}
				]
			}
		},
		methods: {
			changeMode(index) {
				this.currmentIndex=index
				console.log(this.currmentIndex)
			},
		}
	}
</script>

<style lang="less">
	.pay-mode {
		margin-top: 24rpx;
		background: #FFFFFF;
		border-radius: 15rpx;
	
		.mode-item {
			padding: 40rpx;
			border-bottom: 1rpx solid #f5f5f5;
			font-size:28upx;
			&:nth-last-of-type(1) {
				border-bottom: none;
			}
	
			.item-left {
				font-size: 30rpx;
				font-family: PingFang;
				font-weight: 500;
				color: #333;
			}
			.item-center{
				color: #818181;
			}
			.item-right {
				.check-box {
					width: 40rpx;
					height: 40rpx;
					border-radius: 50%;
					background: url('../../static/user/select.png') no-repeat center /100% 100%;
					margin-left: 20upx;
					border: none;
				}
			}
			.active {
				color:#f56c6c;
				.check-box {
					background: url('../../static/user/selected.png') no-repeat center /100% 100%;
				}
			}
		}
	}
	.explain-box{
		padding: 30upx;
		.explain-title{
			font-size: 30upx;
			font-weight: bold;
			align-items: center;
			.line{
				width: 6upx;
				height: 26upx;
				border-radius: 50upx;
				background-color: #f56c6c;
				margin-right: 10upx;
			}
		}
		.explain-cont{
			margin-top: 10upx;
			.explain-text{
				line-height: 50upx;
				font-size:28upx;
			}
		}
	}
	.button {
		background: #fff;
		padding: 80upx 60upx 0upx 60upx;
	}
</style>
